.two .surface {
    position: absolute;
    top: calc(50% + 4em);
    left: calc(50% - 3em);
    background: #000;
    width: 8em;
    height: 1em;
}
.two .shape {
    animation: two 5s infinite ease-out;
    /* 更改元素变形的原点 */
    transform-origin: 50% 7em; 
}
@keyframes two {
    0%, 15% {
        opacity: 0;
        transform: none;
    }
    15%, 25% {
        opacity: 1;
        transform: none;
        animation-timing-function: cubic-bezier(.5, .05, .91, .47);
    }
    28%, 38% {
        transform: translateX(-2em);
    }
    40%, 45% {
        transform: translateX(-4em);
    }
    50%, 52% {
        transform: translateX(-4em) rotateZ(-20deg);
    }
    70%, 75% {
        transform: translateX(-4em) rotateZ(-10deg);
    }
    78% {
        transform: translateX(-4em) rotateZ(-24deg);
    }
    86%, 100% {
        transform: translateX(-6em) translateY(4em) rotateZ(-90deg);
        opacity: 0;
    }
}